<template>
	<div class="main">
  <div class="outerDiv">
		<go-back aa='../teachers/register'></go-back>
    <Header rightText="" contentTitle="注册" jumpRoute="login"></Header>
    <scroller lock-x>
      <div class="mainContent">
        <div class="loginWrap">
          <div class="boxloginWrap">
            <div class="login">
              <xInput
                :errMsg="errMsgs1"
                plvalue="请输入手机号"
                v-model="vals1"
                :showXx="showxx"
                v-on:clears="clear"
                type="txt"
                groupTitle="手机号码"
              ></xInput>
             <xInput
                :errMsg="errMsgs3"
                plvalue="请输入验证码"
                v-model="vals3"
                :showXx="showxx"
                :yzmtrue='showyzm'
                v-on:clears="clear"
                type="yzm"
                v-on:sends="sendYzm"
                :yzmMsg='yzmMsg'
                groupTitle="验证码"
              ></xInput>
              <xInput
                :errMsg="errMsgs2"
                plvalue="请输入密码（6-16位）"
               
                v-model="vals2"
                :showXx="showxx"
                type="pwd"
                v-on:clears="clear"
                groupTitle="密码"
              ></xInput>
            </div>
            <!-- //用户协议和隐私条款 -->
            <div class="tiaokuanBox">点击立即注册，即表示同意
              <b @click="showHideOnBlur=true">《用户注册协议》</b>和
              <b>《用户隐私条款》</b>
            </div>
           <!-- <div class="comfirm" v-show="showTeac==false">
              <Btn message="立即注册" :col="showColor" v-on:btnClick="suresLogUser"></Btn>
            </div> -->
						<div class="comfirm">
						  <Btn message="教师注册" :col="showColor" v-on:btnClick="suresLogTea"></Btn>
						</div>
          </div>
        </div>
      </div>
      <div style="width: 7.5rem;height: 1.5rem;"></div>
    </scroller>
  </div>
	</div>
</template>

<script>
import { Scroller, XHeader, Group } from "vux";
import xInput from "~/components/xInput";
import Btn from "~/components/Btn";
import Header from "~/components/Header";
import axios from "~/plugins/axios";
import axios2 from "~/plugins/axios2";
import goBack from "~/components/goBack";
import JSEncrypt from 'jsencrypt/bin/jsencrypt'
export default {
  head: {
    title: "注册"
  },
  components: {
    Scroller,
    XHeader,
    Group,
    xInput,
    Btn,
    Header,
		goBack
  },
  data() {
    return {
      yzmMsg: '发送验证码',
			fromUrlData:{},
			showTeac:false,
      errMsgs1: "",
      errMsgs2: "",
      errMsgs3: "",
      vals1: "",
      vals2: "",
      vals3: "",
      showxx: false,
      showColor: "cancel", 
      showyzm: false,   
    };
  },
	created(){
		this.fromUrlData =  JSON.parse(this.$route.query.type);
		console.log('this.fromUrlData.userType',this.fromUrlData.userType)
		this.fromUrlData.userType==3?this.showTeac=true:this.showTeac=false
	},
			destroyed() {
		
		window.removeEventListener('popstate', this.fun, false); //false阻止默认事件
	},
  mounted: function() {   
		if(this.commonJs.isTerminal()=='isAndroid'){
    		if (window.history && window.history.pushState) {
    	history.pushState(null, null, document.URL);
    	window.addEventListener('popstate', this.fun, false); //false阻止默认事件 
    }
		}
  },
  watch: {
    vals1(e) {
      const yzm = document.getElementsByClassName('yzm')[0];
      const reg = /^1[345789]\d{9}$/;  
      if (reg.test(e)) {
        this.showyzm = true;
        yzm.removeAttribute('disabled');
        if (this.vals2.length>5 && this.vals2.length<17) {
          this.showColor = 'sure';        
        }
      } else{
        this.showyzm = false;
        this.showColor = 'cancle'; 
        this.nNum = 60;
        clearInterval(this.timer);
        yzm.setAttribute('disabled', true);
        yzm.innerHTML = '获取验证码';
        
      }          
    },
    vals3(e) {
      const reg = /^1[345789]\d{9}$/;
      if (e.length > 3 && this.vals2.length > 5 && this.vals2.length < 17 && reg.test(this.vals1)) {
        this.showColor = 'sure'
      } else {
        this.showColor = 'cancle'
      }
    },
    vals2(e) {
			const reg = /^1[345789]\d{9}$/;  
				if(this.vals3.length > 3 && e.length>5 && e.length<17 && reg.test(this.vals1)){
					console.log(444)
					this.showColor = 'sure'; 
				}else{
					this.showColor = 'cancle'; 
				}
    }
  },
  methods: {
    fun() {
			this.$router.replace({
				path: '../teachers/register'
			
			})
		
		},
		encryption(e){
			let encryptor = new JSEncrypt(); // 新建JSEncrypt对象
			let publicKey = `MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCCU+sOs2dwS5k10e44LhAwEVDicF2SM9O6/cDdXuDyemjx/RMT/yDJHQ4+jqJOB11nIdeo2lvrD/9oPMePauTjCaXd7AxO75Gzx24skFOb6Rw5Tvjffgsm0ka+/UbK6OWdruPXJDSCrnRskQVhMNRrV6qGLaOCWCQzNwOcz7aCMQIDAQAB`;
			encryptor.setPublicKey(publicKey); // 设置公钥
			this.regTime = new Date().getTime();
			this.rsaPassWord = encryptor.encrypt(this.regTime + e); 
			console.log(this.rsaPassWord);
		},
    clear() {
      this.vals1 = "";
      console.log("clear");
      console.log("this.vals1", this.vals1);
    },
    sendYzm() {
      const reg = /^1[34578]\d{9}$/;
      if (!reg.test(this.vals1)) {
        this.$vux.toast.text("请输入正确11位手机号码");
      } else {
        this.senYzm();
        axios2.post("/identity/sendTeacherMessageCode", {
          codeType: 2,
          mobile: this.vals1
        })
        .then(res => {
          this.$vux.toast.text(res.message);
          const yzm = document.getElementsByClassName('yzm')[0];
          if (res.code == '0') {
            yzm.className = 'yzm';
          } else {
            clearInterval(this.timer)
            yzm.className += ' send';
            yzm.innerHTML = '获取验证码';
            yzm.removeAttribute('disabled');
          }
        })
        .catch(() => {
          this.$vux.toast.text("暂无数据");
        });
      }
    },
    senYzm() {
      const yzm = document.getElementsByClassName('yzm')[0];
      yzm.setAttribute('disabled', true);
      this.showyzm = false
      let n = 60;
      this.timer = setInterval(() => {
        n -= 1;
        yzm.innerHTML = n + '秒';
        if (n <= 0) {
          clearInterval(this.timer)
          yzm.className += ' send';
          yzm.innerHTML = '获取验证码';
          yzm.removeAttribute('disabled');
          this.showyzm = true;
        }
      }, 1000)
    },

    suresLogTea(){
			if(this.showColor=='cancel'){
				
				return false;
			} 
			this.encryption(this.vals2);
			let opiton = this.fromUrlData
			const that = this;
			if (this.showColor == "sure") {
			  axios2.post("/identity/teacherRegister", {
			    account: this.vals1,
			    areaId: opiton.areaid,
			    cityId: opiton.cityid,
			    credentials: this.vals3,
			    className: opiton.classNames,
			    gradeId: opiton.gradeid,
			    name: opiton.sse,
			    password: this.rsaPassWord,
			    provinceId: opiton.provinceid,
			    registerTime: this.regTime,
			    schoolId: opiton.schoolid,
			    userType: 3
			  }).then(res => {
          if(res.message==='注册成功'){
            that.$vux.toast.text(res.message);
						// window.location.href="https://app.sx985.com/download"
			      this.commonJs.gosto('tealogin')			
					} else {
            this.$vux.toast.text("该手机号已注册，请重新输入！");
            this.commonJs.gosto('register')	
          }
			    // that.$vux.toast.text(res.message);
			 
			  })
			  .catch(() => {
          this.$vux.toast.text("注册失败");
          this.commonJs.gosto('register');	
			  });
			} else {
			  
			}
		},
    suresLogUser() {
			this.encryption(this.vals2);
			
			let opiton = this.fromUrlData
      const that = this;
      if (this.showColor == "sure") {
        axios.post("/identity/public/register", {
          account: this.vals1,
          areaId: opiton.areaid,
          cityId: opiton.cityid,
          credentials: this.vals3,
          className: opiton.classNames,
          gradeId: opiton.gradeid,
          name: opiton.sse,
          password: this.rsaPassWord,
          provinceId: opiton.provinceid,
          registerTime: this.regTime,
          schoolId: opiton.schoolid,
          userType: opiton.userType
        }).then(res => {
					if(res.message==='注册成功'){
						that.$vux.toast.text(res.message);
						// window.location.href="https://app.sx985.com/download"
					}
          that.$vux.toast.text(res.message);
 
        })
        .catch(() => {
          this.$vux.toast.text("暂无数据");
        });
      } else {
  
      }
    },
    goto(routerName, queryData) {
      this.$router.push({
        path: routerName,
        query: {
          type: queryData
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.outerDiv {
  width: 100%;
  height: 100vh;
  background: #fff;
  // padding-bottom: 1.5rem;
  .mainContent {
    .loginWrap {
      background: #fff;
      padding: 0 0.6rem;
      .boxloginWrap {
        width: 100%;
        margin: 0.5rem 0 0;
        box-sizing: border-box;
        .login {
          width: 100%;
          height: auto;
          margin-bottom: 0.3rem;
          
        }
        .tiaokuanBox {
          padding: 0.15rem 0.2rem;
          font-size: 0.24rem;
          text-align: left;
          color: #bbbbbb;
          margin-bottom: 0.6rem;
          b {
            text-decoration: underline;
          }
        }
        .comfirm {
          padding-bottom: 1rem;
        }
      }
    }
  }
}
</style>
